<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box" title="标题文字" xxx="yyyyy">div标签</div>
    <ul>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
        <li>11111</li>
    </ul>
</body>

</html>
<script>
    //一.自定义属性
    // var box = document.querySelector('.box');
    // console.log(box.title); //标题文字
    // console.log(box.className); //box
    // console.log(box.xxx); //undefined

    //二.getAttribute等方法
    // var box = document.querySelector('.box');
    // 1.getAttribute()：获取默认的和自定义的属性。
    // console.log(box.getAttribute('title')); //默认的
    // console.log(box.getAttribute('xxx')); //自定义的
    // 2.setAttribute()：设置默认和自定义的属性
    // box.setAttribute('data-name', 'zhangsan'); //参1：自定义的属性名,习惯带上data-   参2：属性值
    // console.log(box.getAttribute('data-name')); //zhangsan
    // box.setAttribute('title', '我是新的标题');
    // removeAttribute(属性名称)：删除默认和自定义的属性
    // box.removeAttribute('xxx');
    // box.removeAttribute('class'); //这里删除class属性名，不需要className.
    // box.removeAttribute('title');


    // 三.通过js的方式添加自定义的属性。
    // 给上面的20个li添加自定义的属性，属性的值就是li的索引。
    // 1.setAttribute()
    // var list = document.querySelectorAll('li');
    // for (var i = 0; i < list.length; i++) {
    //     list[i].setAttribute('index', i);
    // }

    // 2.js点操作符或者中括号 - 结构中看不到，低版本浏览器可以看到 - 最好的方式
    var list = document.querySelectorAll('li');
    for (var i = 0; i < list.length; i++) {
        list[i].index = i;
    }

    // console.log(list[0].index);
    // console.log(list[1].index);
</script>